<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./css/demo.css">
</head>

<body>
    <div class="header"></div>
    <div class="boxCon">
        <div class="logo">招聘吧</div>
        <form action="#" method="get">
            <div class="forBox">
                <div class="imgBox">
                    <img src="./img/dl.png" alt="">
                </div>
                <div class="inputLeft">
                    <span class="or">or</span>
                    <div class="inputLine1">
                        <div class="text1">
                            <div class="sanjiao1"></div>
                            <div class="sanjiao2"></div>
                            密码登录
                        </div>
                        <div class="text2">验证码登录</div>
                    </div>
                    <div class="inputLine2">
                        <input class="userName" id="uName" onclick="nameF()" onblur="nameBlur()" type="text" placeholder="请输入常用手机号，邮箱">
                    </div>
                    <div class="nameTip" id="nTip">请您输入手机号或邮箱！</div>
                    <div class="inputLine3">
                        <input class="userPassword" id="uPassword" onclick="passF()" onblur="passBlur()" type="password" placeholder="请输入您的密码">
                    </div>
                    <div class="passTip" id="pTip">请您输入密码！</div>
                    <div class="line4"> 忘记密码 ？</div>
                    <div class="btn">
                        <button type="button" onclick="login()">登 录</button>
                    </div>
                </div>
                <div class="inputRight">
                    <div class="rL1">还没有账号：</div>
                    <div class="rL2">立即注册-></div>
                    <div class="rL3">使用以下账号直接登录：</div>
                    <div class="rL4"><img src="./img/dl1.png" alt=""></div>
                </div>
            </div>
        </form>
    </div>
</body>

<script>
    // 选中手机号输入框就隐藏错误提示信息
    function nameF(){
        nTip.style.display='none';
    }
    // 手机号輸入框失去焦点后，如果为空就显示提示
    function nameBlur(){
        if(uName.value == ""){
            nTip.style.display='block';
        }else 
        if(!(/^1[34578]\d{9}$/.test(uName.value)) && !(/^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/.test(uName.value))){
            nTip.innerText = "请输入正确的手机号或邮箱！";
            nTip.style.display='block';
        }
    }
    //密码輸入框失去焦点后，如果为空就显示提示
    function passBlur(){
        if(uPassword.value == ""){
            pTip.style.display='block';
        }
    }
    // 选中密码输入框就隐藏错误提示信息
    function passF(){
        pTip.style.display='none';
    }
    // 如果没有输入手机号和密码直接点击登录按钮，就显示两个错误提示信息
    function login() {
        uName.value;
        uPassword.value;
        if (uName.value == "" && uPassword.value == "") {
            nTip.style.display='block';
            pTip.style.display='block';
        }else 
        if(uName.value == ""){
            nTip.style.display='block';
        }
        else 
        if(uName.value !== "" && uPassword.value == ""){
            pTip.style.display='block';
        }
        else if(uName.value == "13555555555" && uPassword.value == '1234'){
            window.location.href='index.html'
        }

    };   
</script>

</html>